<template>
  <CommonDialog class="form-view" :hide-foot="true">
    <div slot="title">{{ title }}</div>
    <section slot="content">
      <!-- <section class="iframe-wrap">
        <iframe src="http://192.168.1.104:8891" frameborder="0"></iframe>
      </section>-->
      <section class="apps-maker-body-banner">
        <div>
          <p class="close-banner" @click="close" />
        </div>
      </section>
      <v-apps-maker ref="fm" :var-info="varInfo" :option="inner" :is-init-data="isInitData" />
    </section>
  </CommonDialog>
</template>
<script>
import CommonDialog from '@/components/Dialog'
import VAppsMaker from '@/components/CustomPage/apps/maker'
import { getDictByCode } from './api'
export default {
  name: 'FormView',
  components: { CommonDialog, VAppsMaker },
  props: {
    title: {
      type: String,
      default: ''
    },
    inner: {
      type: Object,
      default: () => { }
    },
    varInfo: {
      type: Object,
      default: () => { }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  created() {
    document.documentElement.style.fontSize = (375 * 75) / 750 + 'px'
  },
  methods: {
    close() {
      this.$modal.hideAll()
    },
    handleCancel() {
      this.visible = false
    },
    getVarLabel(value) {
      const target = this.ZDYYMBL.find(item => { return item.dictValue === value })
      return Object.keys(target).length ? target.dictName : ''
    },
    // 获取字典
    getDict() {
      return new Promise((resolve, reject) => {
        getDictByCode('ZDYYMBL')
          .then((res) => {
            this.ZDYYMBL =
                  res.data.data && res.data.data.length > 0
                    ? res.data.data[0].list
                    : []
            resolve()
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    handleComit() {
      const r = this.$refs.fm
      return Promise.resolve().then(() => {
        return r.check()
      }).then(result => {
        if (result) {
          return r.getValue()
        }
      }).then(values => {
        if (values) {
          // return this.disabled(true).then(() => values);
        }
        return values
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/utility/shadow.scss';
@import '@/styles/utility/rem.scss';
.form-view {
  /deep/ {
    .content {
      padding: 24px;
      .iframe-wrap {
        width: 375px;
        height: 740px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: rem(30);
        @include boxShadow(3);
        iframe {
          width: 100%;
          height: 100%;
          border-radius: rem(30);
        }
      }
      .apps-maker-body-banner {
        position: sticky;
        top: 0;
        width: 375px;
        height: 64px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 0 0;
        box-shadow: #ebedf0 0 4px 12px;
        z-index: 999;

        > div {
          border-radius: 0 0;
          background: url("../images/pageditor/header.png") no-repeat 50% /
            cover;
          font-size: 14px;
          display: block;
          height: 64px;
          line-height: 82px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          margin: 0 auto;
          position: relative;

          .close-banner {
            position: absolute;
            left: 13px;
            bottom: 10px;
            width: 20px;
            height: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
